<template>
	<view>
		<!-- 主体 -->
		<view class="page page-bottom-bar page-address" style="padding-bottom: 0;">
			<!-- 搜索 -->
			<view class="filter-box flex-row-between">
				<view class="input-box flex-row-start">
					<input class="flex-1" type="text" v-model="searchVal" @input="OnsearchVal" placeholder="姓名/手机号码" />
				</view>
				<image class="icon" src="https://static.newbeaconhotels.com/app/hotel/icon-serach1.png" @click="Onsearch"></image>
			</view>
			<!-- 列表 -->
			<LoadMore ref="LoadMore" id="LoadMore" :token="true" :diffHeight="210" :initData="initData" @dataRefresh='dataRefresh'>
				<view class="hr7"></view>
				<!-- 列表 -->
				<block v-for="(item,index) in dataList" :key="index">
					<view class="address_box font14" style="padding-top: 0;" @click="Onchoose(item)">
						<view class="part1 flex-row-between" style="height: 80rpx;">
							<view>{{item.name}}</view>
							<image class="icon-edit" src="https://static.newbeaconhotels.com/app/hotel/my/edit.png" @click.stop="goNext('/pages/my/contactEdit?id=' + item.id)"></image>
						</view>
						<view class="part2 flex-row-between">
							<view class="phone">{{item.mobile}}</view>
							<view class="font12 font-link" @click.stop="Ondelete(item.id)">删除</view>
						</view>
					</view>
					<view class="hr7"></view>
				</block>
			</LoadMore>
		</view>
		<!-- 底部按钮 -->
		<view class="fix-bottom-btn flex-row-center">
			<view class="btn flex-row-center font-ffffff font15" @click="goNext('/pages/my/contactEdit')">+ 新 增 联 系 人</view>
		</view>
	</view>
</template>

<script>
	import LoadMore from "@/components/j-loadMore/index.vue";
	export default {
		components: { LoadMore },
		data() {
			return {
				isChoose: false,
				searchVal: '',
				dataList: [],
				// 传参数据
				initData: {
					url: 'friend',
					param: {
						tip: '',
						type: 0
					}
				},
			}
		},
		onLoad(options) {
			if (options.mode == 'choose') {
				this.isChoose = true
			}
		},
		onShow() {
			this.$refs.LoadMore.onRefresh(this.initData)
		},
		methods: {
			// LoadMore返回列表数据
			dataRefresh(e){
				this.dataList = e
			},
			// 关键字筛选
			OnsearchVal(e) {
				this.searchVal = e.detail.value
				this.initData.param.tip = e.detail.value
			},
			// 搜索
			Onsearch () {
				this.$refs.LoadMore.onRefresh(this.initData)
			},
			// 删除
			Ondelete(id) {
				let that = this
				uni.showModal({
					title: '操作提示',
					confirmText: '确认',
					confirmColor: '#03004c',
					cancelText: '取消',
					content: '您确认要删除此联系人吗？',
					success: function(res) {
						if (res.confirm) {
							that.$Http({
								url: 'delFriend',
								token: true,
								data: { id: id },
							}).then(res => {
								if (res.code == 1) {
									that.$refs.LoadMore.onRefresh(that.initData)
								}
							});
						}
					}
				});
			},
			// 选择
			Onchoose(item) {
				if (this.isChoose) {
					uni.$emit('chooseMan', item)
					// 关闭当前页面
					uni.navigateBack({ delta: 1 });
				}
			},
			// 路由跳转: tag默认false,tag=true跳到tabBar页面
			goNext(url, tag) {
				if (tag) {
					uni.switchTab({ url: url });
				} else {
					uni.navigateTo({ url: url });
				}
			}
		}
	}
</script>

<style lang="less">
	@import url("style.less");
	@import url("form.less");
</style>
